<template>
  <footer class="footer-bar">
    <div class="footer-content">
      <div class="footer-section about-section">
        <div class="logo-container" @click="router.push('/')">
          <img src="@/assets/logo.png" alt="AI学习辅助平台" class="logo" />
          <h2 class="site-name">AI学习辅助平台</h2>
        </div>
        <p class="about-text">AI学习辅助平台是一个基于人工智能的学习平台，致力于为学生提供个性化的学习体验和智能化的学习辅助。</p>
        <div class="social-links">
          <a href="#" class="social-link"><el-icon><Message /></el-icon></a>
          <a href="#" class="social-link"><el-icon><Share /></el-icon></a>
          <a href="#" class="social-link"><el-icon><Connection /></el-icon></a>
        </div>
      </div>
      
      <div class="footer-section links-section">
        <h3 class="section-title">快速链接</h3>
        <ul class="links-list">
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">使用条款</a></li>
          <li><a href="#">隐私政策</a></li>
        </ul>
      </div>
      
      <div class="footer-section links-section">
        <h3 class="section-title">学习资源</h3>
        <ul class="links-list">
          <li><a href="#">课程中心</a></li>
          <li><a href="#">题库资源</a></li>
          <li><a href="#">学习社区</a></li>
          <li><a href="#">AI助手</a></li>
        </ul>
      </div>
      
      <div class="footer-section contact-section">
        <h3 class="section-title">联系我们</h3>
        <div class="contact-info">
          <p><el-icon><Location /></el-icon> 贵州省贵阳市花溪区</p>
          <p><el-icon><Phone /></el-icon> 400-123-4567</p>
          <p><el-icon><Message /></el-icon> 2224257273@qq.com</p>
        </div>
        <div class="qrcode-container">
          <img src="@/assets/qrcode.png" alt="微信公众号" class="qrcode" />
          <p>扫码关注公众号</p>
        </div>
      </div>
    </div>
    
    <div class="footer-bottom">
      <p class="copyright">© 2023 AI学习辅助平台 版权所有</p>
      <p class="icp">京ICP备12345678号-1</p>
    </div>
    
    <div 
      class="back-to-top" 
      :class="{ visible: showBackToTop }"
      @click="scrollToTop"
    >
      <el-icon><Top /></el-icon>
    </div>
  </footer>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  Message, 
  Share, 
  Connection, 
  Location, 
  Phone, 
  Top 
} from '@element-plus/icons-vue';

const router = useRouter();
const showBackToTop = ref(false);

// 监听滚动事件
const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300;
};

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
.footer-bar {
  background-color: #1e88e5;
  color: #fff;
  padding-top: 50px;
  position: relative;
  margin-top: 20px;
  
  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px 30px;
    
    .footer-section {
      margin-bottom: 30px;
      
      &.about-section {
        flex: 0 0 100%;
        max-width: 350px;
        
        .logo-container {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          cursor: pointer;
          
          .logo {
            width: 40px;
            height: 40px;
            margin-right: 10px;
          }
          
          .site-name {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
          }
        }
        
        .about-text {
          margin-bottom: 20px;
          line-height: 1.6;
          opacity: 0.9;
        }
        
        .social-links {
          display: flex;
          
          .social-link {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            color: #fff;
            transition: background-color 0.3s;
            
            &:hover {
              background-color: rgba(255, 255, 255, 0.2);
            }
          }
        }
      }
      
      &.links-section {
        flex: 0 0 180px;
        
        .section-title {
          font-size: 18px;
          margin: 0 0 20px;
          position: relative;
          padding-bottom: 10px;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background-color: #fff;
          }
        }
        
        .links-list {
          list-style: none;
          padding: 0;
          margin: 0;
          
          li {
            margin-bottom: 10px;
            
            a {
              color: rgba(255, 255, 255, 0.9);
              text-decoration: none;
              transition: color 0.3s;
              
              &:hover {
                color: #fff;
                text-decoration: underline;
              }
            }
          }
        }
      }
      
      &.contact-section {
        flex: 0 0 300px;
        
        .section-title {
          font-size: 18px;
          margin: 0 0 20px;
          position: relative;
          padding-bottom: 10px;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background-color: #fff;
          }
        }
        
        .contact-info {
          margin-bottom: 20px;
          
          p {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            
            .el-icon {
              margin-right: 10px;
            }
          }
        }
        
        .qrcode-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .qrcode {
            width: 100px;
            height: 100px;
            background-color: #fff;
            padding: 5px;
            border-radius: 4px;
            margin-bottom: 10px;
          }
          
          p {
            font-size: 14px;
            opacity: 0.9;
          }
        }
      }
    }
  }
  
  .footer-bottom {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    text-align: center;
    
    .copyright, .icp {
      margin: 0;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1e88e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 99;
    
    &.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    &:hover {
      background-color: #1976d2;
      transform: translateY(-5px);
    }
  }
}
</style> 